import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Navigator,
    TextInput,
    TouchableOpacity,
    Button,
    RefreshControl,
    AsyncStorage
} from 'react-native';
import NavigationBar from './js/common/NavigationBar'
import Toast, {DURATION} from 'react-native-easy-toast'

const KEY = 'text'
export default class AsyncStorageTest extends Component {
    constructor(props) {
        super(props)

    }
    onSave() {
        AsyncStorage.setItem(KEY, this.text, (error) => {
            if(!error) {
                this.toast.show('保存成功', DURATION.LENGTH_LONG)
            } else {
                this.toast.show('保存失败', DURATION.LENGTH_LONG)

            }
        })
    }
    onRemove() {
        AsyncStorage.removeItem(KEY, this.text, (error) => {
            if(!error) {
                this.toast.show('移除成功', DURATION.LENGTH_LONG)
            } else {
                this.toast.show('移除失败', DURATION.LENGTH_LONG)

            }
        })
    }
    onFetch() {
        AsyncStorage.getItem(KEY, (error, result) => {
            if(!error) {
                if(result !== '' && result !== null) {
                    this.toast.show('取出成功：' + result, DURATION.LENGTH_LONG)
                } else {
                    this.toast.show('取出内容为空：', DURATION.LENGTH_LONG)
                }
            } else {
                this.toast.show('保存失败', DURATION.LENGTH_LONG)

            }
        })
    }
    render() {
        return (
            <View style={styles.container}>
                <NavigationBar
                    title='AsyncTest'
                    style={{backgroundColor: '#6495ed'}}
                />
                <View style={{flexDirection: 'row'}}>
                    <Button
                        title={'保存数据'}
                        onPress={() => {this.onSave()}}
                    ></Button>
                    <Button
                        title={'删除数据'}
                        onPress={() => {this.onRemove()}}
                    ></Button>
                    <Button
                        title={'获取数据'}
                        onPress={() => {this.onFetch()}}
                    ></Button>
                </View>

                <TextInput style={{height: 40, borderWidth: 1, margin: 6}}
                    onChangeText={text=>this.text=text}/>
                <Toast ref={toast=>this.toast=toast}/>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
        justifyContent: 'center'
    },
    text: {
        fontSize: 20
    },
    row: {
        height: 50
    },
    line: {
        height: 1,
        backgroundColor: 'black'
    }
});